<!DOCTYPE html>

<html data-theme="dark" lang="zh-CN">
<head><meta name="description" content="sfx-collection - 若通音乐（Ruotong Music）。页面：sfx-collection。高品质商用音乐与音效，授权便捷，企业合作支持。"><meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="default-src 'self'; script-src 'self' https://www.googletagmanager.com https://unpkg.com 'nonce-RmcIO3FJbCKswy0d4PlsEQ' 'strict-dynamic' 'report-sample'; style-src 'self' 'unsafe-inline' 'report-sample'; img-src 'self' data: https: blob:; font-src 'self' data: https:; connect-src 'self' https:; frame-src 'self' https:; object-src 'none'; base-uri 'self'; frame-ancestors 'none'; upgrade-insecure-requests" http-equiv="Content-Security-Policy"/>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title id="doc-title">
   音效歌单 · Ruotong Music｜若通音乐
  </title>
<meta content="按分类浏览音效歌单，支持搜索、筛选与快速预览。" name="description"/>
<link as="image" href="assets/icons.svg" rel="preload"/>








<meta content="dark light" name="color-scheme"/>
<script defer="True" nonce="RmcIO3FJbCKswy0d4PlsEQ" src="../assets/js/theme-init.js">
</script>




</link>
<meta content="strict-origin-when-cross-origin" name="referrer"/>
<link href="//unpkg.com" rel="dns-prefetch"/>
<link crossorigin="anonymous" href="https://unpkg.com" rel="preconnect"/>
<link href="//www.googletagmanager.com" rel="dns-prefetch"/>
<link crossorigin="anonymous" href="https://www.googletagmanager.com" rel="preconnect"/>
<link href="//www.ruotongmusic.com" rel="dns-prefetch"/>
<link crossorigin="anonymous" href="https://www.ruotongmusic.com" rel="preconnect"/>
<meta content="#000000" media="(prefers-color-scheme: dark)" name="theme-color"/>
<meta content="#ffffff" media="(prefers-color-scheme: light)" name="theme-color"/>



<link href="assets/apple-touch-icon.png" rel="apple-touch-icon" sizes="180x180"/>
<meta content="分类标题" property="og:title"/>
<meta content="分类简介文案" property="og:description"/>
<meta content="assets/og-cover.png" property="og:image"/>
<meta content="website" property="og:type"/>
<meta content="zh_CN" property="og:locale"/>
<meta content="summary_large_image" name="twitter:card"/>


<!-- Favicon -->
<link href="/assets/favicon.svg" rel="icon" type="image/svg+xml"/>
<link href="/assets/favicon.ico" rel="icon" sizes="any"/>
<link href="/assets/favicon.png" rel="apple-touch-icon" sizes="180x180"/>

<link href="/site.webmanifest" rel="manifest"/>
<link href="/assets/favicon-32.png" rel="icon" sizes="32x32" type="image/png"/>
<link href="/assets/favicon-16.png" rel="icon" sizes="16x16" type="image/png"/>
<link href="https://unpkg.com" rel="preconnect"/>
<link href="https://www.googletagmanager.com" rel="preconnect"/>

</link><link href="/sfx-collection" rel="canonical"/><link href="/zh/sfx-collection" hreflang="zh" rel="alternate"/><link href="/en/sfx-collection" hreflang="en" rel="alternate"/><link href="/ja/sfx-collection" hreflang="ja" rel="alternate"/><!-- JSON-LD 占位：为满足 CSP（script-src 'self'），请改为带 nonce/hash 的内联脚本，或由服务端注入。 -->








<link rel="stylesheet" href="../assets/css/sfx-collection.min.css">
</head>
<body>
<style>
.skip-to-content{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;}
.skip-to-content:focus{left:16px;top:16px;width:auto;height:auto;z-index:10000;background:#fff;padding:8px 12px;border:1px solid #000;}
:focus-visible{outline:2px solid currentColor;outline-offset:2px;}
</style>
<a class="skip-to-content" href="#main">跳转到主内容</a>


<a class="skip-link" href="#main-content">
   跳到主要内容
  </a>
<a class="skip-link" href="#main">
   跳到主要内容
  </a>
<header class="header" role="banner">
<div class="container row">
<a aria-label="Ruotong Music 首页" class="logo" href="index-v2.html">
<img alt="Ruotong Music" decoding="async" height="26" loading="lazy" src="assets/logo.svg" width="26"/>
<strong>
      Ruotong Music
     </strong>
</a>
<nav aria-label="主导航">
<a href="index-v2.html">
      音乐
     </a>
<a href="collections.html">
      合集
     </a>
<a href="pricing.html">
      价格
     </a>
<a href="support.html">
      支持
     </a>
</nav>
<div class="grow">
</div>
<div class="actions">
<button aria-label="切换明暗主题" aria-pressed="false" class="theme rt-theme-toggle icon-btn" id="rt-theme-toggle">
<svg aria-hidden="true" class="sun" height="16" width="16">
<use href="assets/icons.svg#i-sun">
</use>
</svg>
<svg aria-hidden="true" class="moon" height="16" width="16">
<use href="assets/icons.svg#i-moon">
</use>
</svg>
<span class="rt-visually-hidden">
       切换主题
      </span>
</button>
<div class="input" role="search">
<svg aria-hidden="true" height="16" width="16">
<use href="assets/icons.svg#i-search">
</use>
</svg>
<input aria-label="搜索音效" id="sfx-q" placeholder="搜索音效：whoosh / ui / rain …" type="search"/>
<kbd class="kbd">
       /
      </kbd>
</div>
<button class="ghost" type="button">
      中文 / EN / 日本語
     </button>
<button class="ghost" type="button">
      登录
     </button>
<button class="btn" type="button">
      开始使用
     </button>
<a aria-label="个人主页" class="avatar-btn" href="account.html">
<svg aria-hidden="true" height="32" width="32">
<use href="assets/icons.svg#i-user">
</use>
</svg>
</a>
</div>
</div>
</header>
<main id="main-content">
<section aria-labelledby="hero-title" class="sfx-col-hero" id="hero">
<div class="container hero-inner">
<div class="hero-text">
<div class="badge">
       SOUND EFFECTS
      </div>
<h1 id="hero-title">
       分类标题
      </h1>
<p class="sub" id="hero-desc">
       分类简介文案
      </p>
</div>
<div aria-hidden="true" class="hero-art" id="hero-art">
</div>
</div>
</section>
<div class="sfx-col-toolbar">
<div class="container bar">
<div class="tool">
<svg aria-hidden="true" height="16" width="16">
<use href="assets/icons.svg#i-time">
</use>
</svg>
<button aria-pressed="true" class="chip" data-dur="any">
       时长：不限
      </button>
<button class="chip" data-dur="0-3">
       0‑3s
      </button>
<button class="chip" data-dur="3-5">
       3‑5s
      </button>
<button class="chip" data-dur="5+">
       5s+
      </button>
</div>
<div class="tool">
<svg aria-hidden="true" height="16" width="16">
<use href="assets/icons.svg#i-wave">
</use>
</svg>
<button aria-pressed="true" class="chip" data-var="all">
       全部变体
      </button>
<button class="chip" data-var="soft">
       Soft
      </button>
<button class="chip" data-var="sharp">
       Sharp
      </button>
</div>
<div class="tool grow">
</div>
<div class="tool">
<svg aria-hidden="true" height="16" width="16">
<use href="assets/icons.svg#i-sort">
</use>
</svg>
<label class="muted" for="sfx-sort">
       排序
      </label>
<select aria-label="输入" id="sfx-sort-ui">
<option selected="" value="popular">
        热门
       </option>
<option value="new">
        最新
       </option>
<option value="az">
        A‑Z
       </option>
<option value="dur">
        时长
       </option>
</select>
</div>
</div>
</div>
<div class="sfx-filters" style="display:none">
<div class="container bar">
<div class="input" role="search">
<svg aria-hidden="true" height="16" width="16">
<use href="assets/icons.svg#i-search">
</use>
</svg>
<input aria-label="搜索音效" id="sfx-q" placeholder="搜索音效：whoosh / ui / rain …" type="search"/>
<kbd class="kbd">
       /
      </kbd>
</div>
<div class="select">
<label for="sfx-cat">
       分类
      </label>
<select aria-label="分类" id="sfx-cat">
</select>
</div>
<div class="range">
<label for="sfx-dmin">
       时长
      </label>
<input aria-label="最短时长" id="sfx-dmin" max="10" min="0" step="0.1" type="range" value="0"/>
<input aria-label="最长时长" id="sfx-dmax" max="10" min="0" step="0.1" type="range" value="10"/>
<div class="muted" id="sfx-dval">
       0.0s - 10.0s
      </div>
</div>
<div class="sort">
<label for="sfx-sort-main">
       排序
      </label>
<select aria-label="排序" id="sfx-sort-main">
<option value="newest">
        最新
       </option>
<option value="dur-asc">
        时长 · 短→长
       </option>
<option value="dur-desc">
        时长 · 长→短
       </option>
</select>
</div>
</div>
</div>
<section aria-label="音效列表" class="sfx-list container" id="sfx-list">
</section>
</main>
<footer class="footer">
<div class="container grid grid--footer">
<div>
<div class="muted">
      产品
     </div>
<a href="index-v2.html">
      音乐
     </a>
<br/>
<a href="sfx.html">
      音效
     </a>
</div>
<div>
<div class="muted">
      公司
     </div>
<a href="about.html">
      关于我们
     </a>
</div>
<div>
<div class="muted">
      协议
     </div>
<a href="policy/v2/license-agreement/index.html">
      授权协议
     </a>
<br/>
<a href="policy/v2/privacy/index.html">
      隐私条款
     </a>
</div>
</div>
</footer>
<script nonce="RmcIO3FJbCKswy0d4PlsEQ" src="js/rt-theme.js" defer>
</script>
<script nonce="RmcIO3FJbCKswy0d4PlsEQ" src="js/sfx.js" defer>
</script>
<script nonce="RmcIO3FJbCKswy0d4PlsEQ" src="js/sfx-collection.js" defer>
</script>
<script nonce="RmcIO3FJbCKswy0d4PlsEQ" src="js/rt-color-summary-inject.js" defer>
</script>
<script nonce="RmcIO3FJbCKswy0d4PlsEQ" src="js/rt-color-button-overlay.js" defer>
</script>
<script nonce="RmcIO3FJbCKswy0d4PlsEQ" src="js/rt-color-actions.js" defer>
</script>
<script nonce="RmcIO3FJbCKswy0d4PlsEQ" src="../contrast/contrast-theme.js" defer>
</script>
<script nonce="RmcIO3FJbCKswy0d4PlsEQ" src="../contrast/contrast-palette-restore.js" defer>
</script>
<script nonce="RmcIO3FJbCKswy0d4PlsEQ" src="../contrast/contrast-swatch-attr.js" defer>
</script>
<script nonce="RmcIO3FJbCKswy0d4PlsEQ" src="../contrast/contrast-palette-even.js" defer>
</script>
<script nonce="RmcIO3FJbCKswy0d4PlsEQ" src="../contrast/contrast-palette-recent.js" defer>
</script>
<script src="js/a11y-and-motion.js" defer>
</script>

<!-- Ruotong Account Buttons (auto-wired) -->
<script>window.RUOTONG_API_BASE = window.RUOTONG_API_BASE || '/api';</script>
<link rel="stylesheet" href="/rt-assets/css/toast.css">
<link rel="stylesheet" href="/rt-assets/css/modal.css">
<script src="/rt-assets/js/toast.js" defer></script>
<script src="/rt-assets/js/modal.js" defer></script>
<script src="/rt-assets/js/account-actions.js" defer></script>


<script>
document.addEventListener('DOMContentLoaded', function(){
  try{ document.body.classList.add('rt-darkfix'); }catch(e){}
});
</script>

  <script src="js/auth.js" defer></script>
  <script src="js/nav-fallback.js" defer></script>
</body>
</html>
